<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 作为函数直接调用(默认绑定)
        setTimeout(function(){
            console.log(this)
        },1000) //window

        var foo = function(){
            console.log(this);
        }
        foo; //window

        // 作为对象方法调用(隐式绑定)
        var obj = {
            fee:function(){
                console.log(this);
            }
        }
        obj.fee(); //obj

        obj.foo = foo;
        obj.foo(); //obj
        

        var x = 1;
        var obj = {
            x:2,
            f1: function(){
                console.log("x1:",this.x);
            },
            f2: function(){
                function f3(){
                    console.log("x2:",this.x);
                }
                console.log("this",this);
                // f3(); window调用
                f3.call(this);
            }
        }
        obj.f1(); //2
        obj.f2(); //f3(); 1    f3.call(this); 2

        var x = 1;
        var obj = {
            x:2,
            f1: function(){
                console.log("x1:",this.x);
            },
            f2: function(){
                function f3(){
                    console.log("x2:",this.x);
                }
                return f3;
            }
        }
        obj.f1(); //2
        obj.f2()(); //1  => f3();
        obj.f2().call(obj); //2

        // 默认绑定
        var a = 2;
        function foo() {
          console.log(this); //window
          console.log(this.a); //2
        }
        foo();

        //案例2
        function show() {
            var a = 200;
            console.log("this.a:",this.a); //100 or 200 this指向的是window //this.a: 100
        }
        var a = 100;
        setTimeout(show, 2000); //定时器回调函数调用时，函数上下文是window对象。

    </script>
</body>
</html>